<template>
  <Dropdown>
    <a class="label-wrap">
      {{ currentLabel }}
      <CaretDownOutlined />
    </a>
    <template #overlay>
      <component :is="menus" />
    </template>
  </Dropdown>
</template>

<script setup lang="tsx">
import { computed } from 'vue';
import { CaretDownOutlined } from '@ant-design/icons-vue';
import { Dropdown, Menu, MenuItem } from 'ant-design-vue';

interface Props {
  options: Array<{ label: string; value: string | number }>;
}

const props = defineProps<Props>();

const currentValue = defineModel<number | string>('value', { default: '' });

const currentLabel = computed(() => {
  return (
    props.options.find((item) => item.value === currentValue.value)?.label || ''
  );
});

const emits = defineEmits<{
  change: [value: number | string];
}>();

const handleSelect = (value: number | string) => {
  currentValue.value = value;
  emits('change', value);
};

const menus = computed(() => {
  return (
    <Menu>
      {props.options.map((item, idx) => {
        return (
          <MenuItem key={idx} onClick={() => handleSelect(item.value)}>
            {item.label}
          </MenuItem>
        );
      })}
    </Menu>
  );
});
</script>

<style lang="scss" scoped>
.label-wrap {
  cursor: pointer;
  font-size: 14px;
}
</style>
